<template>
  <div class="packet-wrap">
      <x-header :left-options="{showBack: true, backText:'我的红包'}"></x-header>
      <!-- <p class="tips">红包、代金券使用说明</p>
      <ul class="packet">
        <li>
          <div class="card-main">
            <div class="card-l">三食堂专享红包<p class="foot-tip">有效期至2017.2.14</p></div>
            <div class="card-r"><span class="icon">￥</span>3 <p class="foot-tip">满30可用</p></div>
          </div>
          <span class="circle-l"></span>
          <span class="circle-r"></span>
          <p class="info">限江汉大学文雅苑使用,仅限15072254585用户使用</p>
        </li>
      </ul> -->
  </div>
</template>

<script>
import { XHeader } from 'vux'

export default {
  components: {
    XHeader
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.packet-wrap{
  margin-top:46px;
}
.more-logo{
  height:10.4rem;
  width:10.4rem;
  margin-top:6rem;
  margin-left:50%;
  transform:translateX(-5.2rem);
}
.more-logo img{
  width:100%;
  height:auto;
}
.tips{
  height:32px;
  line-height:32px;
  background-color:#fffae2;
  font-size:12px;
  color:#3f3f3f;
  text-indent:2.5rem;
  border-bottom:1px solid #ffe9a8;
}
.packet{
  padding:0 2rem;
  list-style: none;
}
.packet li{
  background-color:#fff;
  margin:1rem 0;
  height:auto;
  padding:0px 24px;
  border-radius:8px;
  position: relative;
}
.circle-l,.circle-r{
  display:inline-block;
  height:3rem;
  width:3rem;
  border-radius:50%;
  background-color:#fbf9fe;
}
.circle-l{
  position: absolute;
  top:5.8rem;
  left:-1.5rem;
}
.circle-r{
  position: absolute;
  top:5.8rem;
  right:-1.5rem;
}
.info{
  border-top:1px solid #bababa;
  padding:1rem 0;
  color:#969696;
  font-size:1rem;
}
.card-main{
  display: -webkit-flex; /* Safari */
  display: flex;
}
.card-l{
  margin-top:4rem;
  flex:2;
  font-size:2rem;
  color:#ff4d4d!important;
}
.card-r{
  flex:1;
  font-size:5.2rem;
  color:#ff4d4d!important;
  margin-bottom:2.5rem;
}
.card-r .cion{
  font-size:1.6rem!important;
}
.foot-tip{
  color:#969696;
  font-size:12px;
}
</style>